<template>
  <div class='order-detail'>
    <van-cell-group class="products" :border="false" inset>
      <p>退款商品</p>
      <div v-for="(item, index) in product" :key="index">
        <van-card class="product" v-for="(items, indexs) in item.detailinfo" :key="indexs" :num="items.quantity" :desc="items.p_s_name" :title="items.product_name" :thumb="`${resourceURL}${items.cover_url}`">
          <template #price>
            <div v-if="order.order_type==1">￥{{items.mprice}}</div>
            <div v-if="order.order_type==2">{{items.growth_coin}}积分</div>
          </template>
        </van-card>
      </div>

    </van-cell-group>
    <van-cell-group inset>
      <div class="afterbox">
        <div class="status">
          <van-cell title="单元格" :value="status" is-link :border="true" @click="show=true" />
        </div>
        <div class='title'>退款原因</div>

        <van-field v-model="message" rows="2" maxlength="200" show-word-limit autosize type="textarea" placeholder="请输入退款原因" />
      </div>
      <van-cell title="退款金额" :value="`￥${order.pay_amount}`" size="large" v-if="order.order_type==1" />
    </van-cell-group>
    <van-cell-group inset>
      <div class="afterbox">
        <div class='title'>上传凭证</div>
        <van-uploader class="uploader" v-model="imgList" :after-read="updateUserImg" :max-size="1024 * 51200" accept=".jpg,.png" @oversize="onOversize" @delete="deleteImage" :max-count="6">
          <van-image class="uploader_img" :src="require('@/assets/img/uploader.png')" fit="cover" />
        </van-uploader>
      </div>
    </van-cell-group>
    <div class="submit">
      <van-button type="primary" round block @click="getaftersale" class="btn">提交</van-button>
    </div>
    <van-popup v-model="show" position="bottom">
      <van-picker title="货物状态" show-toolbar :columns="columns" @confirm="onConfirm" />
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  data () {
    return {
      order: {},
      product: [],
      image: [],
      status: '请选择',
      is_status: 1,
      message: "",
      imgList: [],
      id: '',
      did: '',
      show: false,
      columns: ['未收到货', '已收到货'],
    };
  },
  created () {
    this.id = this.$route.query.id;
    this.did = this.$route.query.did;
    this.getOrderDetail();
  },
  methods: {
    //选择货物状态
    onConfirm (e, index) {

      if (e) {
        this.status = e
        this.is_status = index + 1
        this.show = false
      }
    },
    //提交申请售后
    getaftersale () {
      this.$axios
        .post(this.$api.useraftersales, {
          order_id: this.id,
          detail_id: this.did,
          content: this.message,
          images: this.image,
          is_status: this.is_status,
        })
        .then((res) => {
          if (res.data.code == 1) {
            this.$router.push({ path: '/aftersaleinfo', query: { id: this.$route.query.id } })
          }
        });
    },
    //限制上传文件大小
    onOversize () {
      Toast("文件大小不能超过 50M");
    },
    //上传评价图片
    updateUserImg (file) {
      let formData = new FormData();
      formData.append("image", file.file);
      formData.append("type_name", "after");
      this.$axios.post(this.$api.uploadshopimage, formData).then((res) => {
        this.image.push(res.data.data.file_path);
      });
    },
    //删除图片
    deleteImage (file, detail) {
      this.image.splice(detail.index, 1);
    },
    // 订单详情
    getOrderDetail () {
      this.$axios
        .get(this.$api.getorderdetail, {
          params: {
            order_id: this.id,
          },
        })
        .then((res) => {
          this.order = res.data.data.order;
          this.product = res.data.data.productinfo;
          this.order.order_time = this.$moment(
            Number(this.order.order_time) * 1000
          ).format("YYYY-MM-DD HH:mm");
          this.order.pay_time = this.$moment(
            Number(this.order.pay_time) * 1000
          ).format("YYYY-MM-DD HH:mm");
        });
    },
  },
};
</script>

<style scoped lang='less'>
.btn {
  background: #ff7733;
  border: 1px solid #ff7733;
  color: white;
}
/deep/.van-cell__value {
  font-size: 14px;

  font-weight: bold;
  color: #fb2b2c;
}
.status {
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(32, 29, 29, 0.06);
  padding-bottom: 12px;
  .van-cell {
    padding: 0;
    .van-cell__value {
      font-size: 14px;

      font-weight: normal;
      color: rgba(25, 23, 20, 0.3);
    }
  }
}
.order-detail {
  min-height: calc(100vh - 60px);
  padding-top: 14px;
  padding-bottom: 80px;
  /deep/.van-cell-group {
    border: 1px solid #f2f2f2;
    margin-bottom: 12px;
  }
  .products {
    p {
      margin: 0;
      font-size: 14px;
      margin: 16px;
      color: #06021a;
    }
    .shopurl {
      .van-cell__left-icon {
        display: flex;
        align-items: center;
        width: 20px;
        height: 22px;
        margin-right: 8px;
      }
    }
    .product {
      margin-top: 0;
      background-color: #fff;
      /deep/.van-card__title {
        font-size: 14px;
      }
      /deep/ .van-card__price {
        font-size: 14px;
      }
    }
    .one_option_btn {
      display: flex;
      justify-content: flex-end;
      margin: 10px 0 6px;
      /deep/.van-button {
        width: 80px;
        margin-left: 10px;
      }
    }
    .option_btn {
      display: flex;
      justify-content: flex-end;
      padding: 6px 16px 12px;
      /deep/.van-button {
        width: 80px;
        margin-left: 10px;
      }
    }
  }
  .afterbox {
    width: calc(100% - 28px);
    padding: 14px;
    padding-bottom: 0;
    .title {
      font-size: 14px;
      color: #201d1d;
      margin-bottom: 14px;
    }
    .uploader {
      margin-top: 16px;
      .uploader_img {
        width: 95px;
        height: 95px;
        border-radius: 10px;
      }
      /deep/.van-uploader__preview-image {
        width: 95px;
        height: 95px;
        border-radius: 10px;
      }
    }
    .van-field {
      background: #f6f6f6;
      border-radius: 6px;
    }
    /deep/.van-field__control {
      height: 150px !important;
    }
  }
  .submit {
    position: fixed;
    left: 0;
    bottom: 24px;
    display: flex;
    width: 100%;
    padding: 6px 16px;
    background-color: transparent;
    box-sizing: border-box;
  }
}
</style>
